﻿@model SongMenuDetailModel
@{
    ViewBag.Title = Model.SongMenu.Name;
}

<div class="row">
    <div class="col-twelve">
        <div style="margin-top:3.3rem">
            <div id="t_wrapper">
                <div id="t_cover">
                    <img src="~/lib/audio/images/logo.png">
                </div>
                <div id="t_top">
                    <div id="t_title_info">
                        <span class="artist"></span>
                        <span class="title">请先选择要播放的歌曲！</span>
                    </div>
                </div>
                <div id="t_middle">
                    <div id="play"></div>
                    <div id="pause" class="hidden">
                    </div>
                    <div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="t_progress">
                        <div id="trackInfo">
                            <div id="error">
                            </div>
                            <div id="current">0:00</div>
                            <div id="duration">0:00</div>
                        </div>
                        <div style="width: 0%;" class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min"></div>
                        <span style="left: 0%;" class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0"></span>
                    </div>
                    <span id="prev"></span>
                    <span id="next"></span>
                </div>
                <div id="t_bottom">
                    <div id="range">
                        <div id="val"></div>
                        <div id="vol"></div>
                        <div id="rangeVal"></div>
                    </div>
                    <div id="t_pls_show" class="noselectpls"></div>
                </div>
            </div>
            <div id="playlist">
                <ul>
                    @{
                        int i = 1;
                    }
                    @foreach (var item in Model.Songs)
                    {

                        <li t_cover="@item.Cover" t_artist="@item.Album" t_name="@item.Name">
                            <a href="#">@(10 * (Model.PageIndex - 1) + i) . @item.Name</a>
                            <audio preload="none">
                                <source src="@($"https://todo369.top/zaojiao"+item.Mp3)" type="audio/mp3">
                            </audio>
                        </li>
                        i++;
                    }
                </ul>

            </div>
            @Html.Raw(Model.Page)
        </div>
    </div>
</div>



@section styles{
    <link rel="stylesheet" type="text/css" href="~/lib/audio/Css/tplayer.css" />
    <link rel="stylesheet" type="text/css" href="~/lib/audio/Plugins/FontAwesome4.1/css/font-awesome.min.css" />
    <style>
        body {
            line-height: 2rem !important;
        }

        img {
            max-width: none;
        }
    </style>
}
@section scripts{
    <script src="~/lib/audio/Js/jquery.js"></script>
    <script src="~/lib/audio/Js/jquery-ui.js"></script>
    <script src="~/lib/audio/Js/tPlayer.js"></script>
}
